<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .swiper-wrap {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            text-align: center;
        }

        .swiper-list {
            position: relative;
            display: flex;
            transition-duration: 0;
            transition-property: transform;
        }

        .swiper-item {
            position: relative;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 520px;
            height: 310px;
        }

        .red {
            background-color: red;
        }

        .orange {
            background-color: orange;
        }

        .yellow {
            background-color: yellow;
        }

        .green {
            background-color: green;
        }

        .cyan {
            background-color: cyan;
        }
    </style>
    <script>
        window.onload = function () {
            // 初始化    
            const itemEles = document.querySelectorAll('.swiper-item')
            const swiperContainer = document.querySelector('.swiper-wrap')
            const swiperList = document.querySelector('.swiper-list')
            const nextBtn = document.querySelector('.arrow-right')
            const preBtn = document.querySelector('.arrow-left') 

            const preFragment = document.createDocumentFragment()
            const nextFragment = document.createDocumentFragment()
            const len = itemEles.length
            const itemWidth = parseInt(getComputedStyle(itemEles[0]).width)
            const totalWidth = itemWidth * len // 元素总宽度
            const containerWidth = parseInt(getComputedStyle(swiperContainer).width) // 容器宽度
            let currentSelectIndex = 0 // 当前索引
            let translate = originTranslate =  -totalWidth + containerWidth * 0.5 - itemWidth * 0.5

            for (let i = 0; i < len; i++) {
                preFragment.appendChild(itemEles[i].cloneNode(true))
                nextFragment.appendChild(itemEles[i].cloneNode(true))
            }

            swiperList.prepend(preFragment)
            swiperList.append(nextFragment)
            
            swiperList.style.transform = `translateX(${originTranslate}px)`
            currentSelectIndex = len

            // 下一张
            nextBtn.addEventListener('click', function() {
                if (currentSelectIndex >= len * 2) {
                    swiperList.style.transitionDuration = '0s'
                    swiperList.style.transform = `translateX(${originTranslate}px)`
                    requestAnimationFrame(() => {
                        translate = originTranslate -itemWidth
                        currentSelectIndex = len + 1
                        swiperList.style.transitionDuration = '.3s'
                        swiperList.style.transform = `translateX(${translate}px)`
                    })
                    return
                }
                translate = translate - itemWidth
                currentSelectIndex++
                swiperList.style.transitionDuration = '.3s'
                swiperList.style.transform = `translateX(${translate}px)`
            })

            // 上一张
            preBtn.addEventListener('click', function() {
                if (currentSelectIndex <= Math.ceil(len * 0.5)) {
                    translate = originTranslate - itemWidth * 2
                    swiperList.style.transitionDuration = '0s'
                    swiperList.style.transform = `translateX(${translate}px)`
                    requestAnimationFrame(() => {
                        translate = translate + itemWidth
                        currentSelectIndex = len + 1
                        swiperList.style.transitionDuration = '.3s'
                        swiperList.style.transform = `translateX(${translate}px)`
                    })
                    return
                }
                translate = translate + itemWidth
                currentSelectIndex--
                swiperList.style.transitionDuration = '.3s'
                swiperList.style.transform = `translateX(${translate}px)`
            })
            
        }
    </script>
</head>

<body>
    <div class="swiper-wrap">
        <button class="arrow-left">上一张</button>
        <button class="arrow-right">下一张</button>
        <div class="swiper-list">
            <div class="swiper-item red">1</div>
            <div class="swiper-item orange">2</div>
            <div class="swiper-item yellow">3</div>
            <div class="swiper-item green">4</div>
            <div class="swiper-item cyan">5</div>
        </div>
    </div>
</body>

</html>